import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import type { CreateUserProps } from './components/CreateUserDrawer';
import UpdateForm from './components/UpdateForm';
import { dyCpsWarningCreate, dyCpsWarningList } from './service';

const handleUpdateClue = async (selectedRows: CreateUserProps) => {
  const hide = message.loading('正在更新');
  try {
    await dyCpsWarningCreate({ ...selectedRows });
    hide();
    message.success('更新成功');
    return true;
  } catch (error) {
    hide();
    message.error('更新失败');
    return false;
  }
};
const valueEnum = {
  1: {
    text: '进行中',
    status: 'Success',
  },
  0: {
    text: '下线',
    status: 'Error',
  },
};
const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [updateClueVisible, handleUpdateClueVisible] = useState<boolean>(false);
  const [currentClueRow, setCurrentClueRow] = useState<CreateUserProps>();
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */

  const columns: ProColumns<API.RuleListItem>[] = [
    {
      title: '产品店铺',
      dataIndex: 'name',
      hideInSearch: true,
      copyable: true,
    },
    {
      title: '阈值金额',
      dataIndex: 'amount',
      hideInSearch: true,
    },
    {
      title: '联系渠道',
      dataIndex: 'mobiles',
      hideInSearch: true,
    },

    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum,
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record) => [
        <a
          key="editable"
          onClick={async () => {
            console.log(record);
            setCurrentClueRow(record);
            handleUpdateClueVisible(true);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        headerTitle={'全部店铺'}
        actionRef={actionRef}
        rowKey="key"
        toolBarRender={() => [
          <Button
            key="2"
            type="primary"
            onClick={() => {
              handleUpdateClueVisible(true);
            }}
          >
            创建广告
          </Button>,
        ]}
        search={{
          defaultCollapsed: false,
          labelWidth: 120,
          optionRender: ({ searchText, resetText }, {}) => {
            return [
              <Button
                key="reset"
                style={{ marginRight: '10px' }}
                onClick={() => {
                  actionRef?.current?.reset();
                }}
              >
                {resetText}
              </Button>,
              <Button key="search" type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
                {searchText}
              </Button>,
            ];
          },
        }}
        request={async (params: any) => {
          const rsp = await dyCpsWarningList(params);
          if (rsp.code === 'SUCCESS') {
            return { ...rsp.data };
          }
        }}
        columns={columns}
      />
      <UpdateForm
        onSubmit={async (value) => {
          // return;
          const success = await handleUpdateClue({ ...value });
          if (success) {
            handleUpdateClueVisible(false);
            setCurrentClueRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleUpdateClueVisible(false);
          setCurrentClueRow(undefined);
        }}
        updateModalVisible={updateClueVisible}
        values={currentClueRow || {}}
        formType={0}
      />
    </PageContainer>
  );
};
export default TableList;
